Ext.onReady(function() {
	Ext.define('File', {
				extend : 'Ext.data.Model',
				fields : [{
							name : 'id',
							type : 'string'
						}, {
							name : 'userid',
							type : 'string'
						}, {
							name : 'fileName',
							type : 'string'
						}, {
							name : 'path',
							type : 'string'
						}, {
							name : 'statue',
							type : 'string'
						}, {
							name : 'fileType',
							type : 'string'
						}, {
							name : 'fileSize',
							type : 'string'
						}, {
							name : 'fileSrc',
							type : 'string'
						}, {
							name : 'updata',
							type : 'string'
						}

				]
			});
	Ext.define('Image', {
				extend : 'Ext.data.Model',
				fields : [{
							name : 'src',
							type : 'string'
						}, {
							name : 'caption',
							type : 'string'
						}]
			});
	
	Ext.create('Ext.data.Store', {
				id : 'fileStore',
				model : 'File',
				pageSize : 10,// 每页显示数目
				proxy : {
					actionMethods : {
						read : 'post'
					},
					type : 'ajax',
					url : '/filesup/filelist.do',// 提供Json字符串的页面
					reader : {

						type : 'json',
						root : 'data'
						// totalProperty:'total'//总项数
					}
				},
				autoLoad : true
			});
var tpl = new Ext.XTemplate(

'<tpl for=".">', '<div style="float:left;margin:10px 50px 0px 20px;"  class="thumb">',
			'<img src="{fileSrc}"style="wight:100px;height:100px"/>',
			'<div style="wight:100px;height:100px" class="details-info">',
			'<b>图片名:</b>',
'</br>',
			'<span>{fileName}</span>',
'</br>',
			'<b>大小:</b>',
			
			'<span>{fileSize}</span>',
'</br>',
			'<b>添加时间:</b>',

			'<span>{updata}</span>',
			'</div>',
			'</div>',

			

			'</tpl>',

			'<div class="x-clear"></div>'



);
	

	var imageTpl = new Ext.XTemplate(

			'<tpl for=".">', '<div style="float:left" class="thumb">',
			'<img src="{fileSrc}"style="wight:100px;height:100px"/></div>',
			'<div class="details-info">',

			'<b>Image Name:</b>',

			'<span>{fileName}</span>',

			'<b>Size:</b>',

			'<span>{fileSize}</span>',

			'<b>Last Modified:</b>',

			'<span>{fileType}</span></div>',

			'</tpl>',

			'<div class="x-clear"></div>'

	//'<tpl for=".">',

	//'<div style="margin-bottom: 10px;wight:100px;height:120" class="thumb-wrap">',
	//'<img src="{fileSrc}" style="wight:100px;height:100px"/>', '<br/><span>{fileName}</span>', '</div>',
	//'</tpl>'
	);
	/*Ext.create('Ext.view.View', {
				store : Ext.data.StoreManager.lookup('fileStore'),
				tpl : imageTpl,
				itemSelector : 'div.thumb-wrap',
				emptyText : '没有数据',
				renderTo : Ext.getBody()
			});
	
	 var panel=Ext.widget('panel',{  
	renderTo:document.body,  
	margin:20,  
	title:'支付管理',  
	height:1000,  
	layout:'fit',  
	dockedItems: [{  
	    xtype: 'toolbar',  
	    dock: 'top',  
	    items: [{  
	        text: '全选',  
	        handler:function(){  
	            var banksView=Ext.getCmp('banksView');  
	            banksView.getSelectionModel().selectAll();  
	  
	            // 第二种方法  
	            //banksView.select(bankStore.data.items,true);  
	        }  
	    },{  
	        text: '反全选',  
	        handler:function(){  
	            var banksView=Ext.getCmp('banksView');  
	            //banksView.getSelectionModel().deselectAll();  
	  
	            // 第二种方法  
	            banksView.deselect(fileStore.data.items,true);  
	        }  
	    }]  
	}],
	items:[{  
	    xtype:'dataview',  
	    id:'banksView',  
	    store: Ext.data.StoreManager.lookup('fileStore'),  
	    trackOver:true,  
	    tpl: banksTpl,  
	    multiSelect:true,  
	    itemSelector: 'div.bank',  
	    selectedItemCls:'bank-selected',  
	    overItemCls: 'bank-hover'  
	}] 
	});*/
	var panel = new Ext.Panel({

		id : 'images-view',

		frame : true,

		width : '900',

		autoHeight : true,

		collapsible : true,

		layout : 'fit',

		//title : '简单的DataView编辑标签,多选择并拖动',

		items : new Ext.DataView({

					store : Ext.data.StoreManager.lookup('fileStore'),

					tpl : tpl,

					autoHeight : true,

					multiSelect : true,

					overClass : 'x-view-over',

					itemSelector : 'div.thumb-wrap',

					emptyText : '没有图片显示',listeners:{  
                selectionchange:function(list,records){  
                    editButton.setDisabled(false);  
                }  
            }  ,
					
 plugins: [
            //Ext.create('Ext.ux.DataView.DragSelector', {}),
            //Ext.create('Ext.ux.DataView.LabelEditor', { dataIndex: 'IntData' })
        ]
    }),
    bbar: Ext.create('Ext.toolbar.Paging', {
        store: Ext.data.StoreManager.lookup('fileStore'),
        displayInfo: true
        //items: [
       //     '-', {
          //      text: '第10页',
            //    handler: function () {
           //         store.loadPage(10);
            //    }
           // }]
    }),
					prepareData : function(data) {

						data.shortName = Ext.util.Format
								.ellipsis(data.name, 15);

						data.sizeString = Ext.util.Format.fileSize(data.size);

						//data.dateString = data.lastmod.format("m/d/Y g:i a");

						return data;

					}

				
				
				

	});

	panel.render(document.body);

});